/*global ImageFlow: false, window: false*/
/*
 * #depends subsonic-trackgrid.js
 */
Ext.ns('Ext.ux.mattgoldspink.subsonic');
Ext.ux.mattgoldspink.subsonic.CoverFlowCount = 0;
Ext.ux.mattgoldspink.subsonic.CoverFlow = Ext.extend(Ext.Panel, {
    constructor: function(config) {
        Ext.apply(this, config, {
            layout: 'border',
            defaults: {
                split: false
            },
            plugins: ['msgbus'],
            items: [new Ext.DataView(
                {
                    cls: 'coverflow',
                    store:  Ext.ux.mattgoldspink.subsonic.FolderTracksStore, //Ext.ux.mattgoldspink.subsonic.FolderViewStore,
                    ref: 'dataview',
                    region: 'north',
                    tpl: new Ext.XTemplate(
                            '<div id="coverflow{[++Ext.ux.mattgoldspink.subsonic.CoverFlowCount]}" class="imageflow">',
                                '<tpl for=".">',
                                    '<img src="{[ this.makeUrl(values.coverArt)]}" longdesc="http://{[ this.makeUrl(values.coverArt)]}" height="50" width="50" alt="{title}" id="{id}" />',
                                '</tpl>',
                            '</div>',                 
                        {
                            makeUrl: function(coverArt) {
                                var params = {
                                    size: '180'
                                };
                                Ext.apply(params, Ext.ux.mattgoldspink.subsonic.LoginDetails);
                                params.id = coverArt;
                                return Ext.ux.mattgoldspink.subsonic.apiUrl + '/rest/getCoverArt.view?' + Ext.urlEncode(params);
                            }
                        }
                    ),
                    multiSelect: true,
                    overClass:'x-view-over',
                    itemSelector:'img',
                    height: 360,
                    getCurrentId: function(){
                        return 'coverflow' + Ext.ux.mattgoldspink.subsonic.CoverFlowCount;
                    }
                }),
                {
                    xtype: 'panel',
                    layout: 'fit',
                    region: 'center',
                    items: new Ext.ux.mattgoldspink.subsonic.TrackGrid({autoWidth: true, ref: '../grid'})
                }
            ]
        });
        Ext.ux.mattgoldspink.subsonic.CoverFlow.superclass.constructor.apply(this, arguments);
        this.dataview.getStore().on('load', this.handleLoadCallback, this.dataview);
    },
    handleLoadCallback: function(){
        if (this.ownerCt.isVisible()) {
            delete this.pendingId;                
            new ImageFlow().init(this.ownerCt.getImageFlowConfig(this.getCurrentId()));
        } else {
            this.pendingId = this.getCurrentId();
            this.ownerCt.on('show', function(){
                if (this.pendingId) {
                    new ImageFlow().init(this.ownerCt.getImageFlowConfig(this.pendingId));
                    delete this.pendingId;
                 }
            }, this, {
                single: true
            });
        }
    },
    getImageFlowConfig: function(id) {
        return {
            ImageFlowID: id, 
            reflections: false,
            aspectRatio: 3.39, 
            imagesHeight: 0.75,
            reflectionP:0.0,
            imageFocusM: 0.85,
            startID:  1,
			onClick: function(){
				window.Ext.ux.Bus.fireEvent('message', 'subsonic.grid.jumpto', this);
			}
        }; 
    }     
});
